<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Register</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{/css/loginAndRegist.css}" id="theme-stylesheet">
  </head>
  <body>
    <div class="page login-page">
      <div class="container d-flex align-items-center">
        <div class="form-holder has-shadow">
          <div class="row">
            <!-- Logo & Information Panel-->
<!--            <div class="col-lg-6">-->
<!--              <div class="info d-flex align-items-center">-->
<!--                <div class="content">-->
<!--                  <div class="logo">-->
<!--                    <h1>欢迎注册</h1>-->
<!--                  </div>-->
<!--                  <p>注册登录界面模板</p>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
            <!-- Form Panel    -->
            <div class="col-lg-12 bg-white">
              <div class="form d-flex align-items-center">
                <form th:action="@{/user/register}" method="post">
                  <div class="content">
                    <div class="form-group">
                      <input id="register-username" class="input-material" type="text" name="adminname" placeholder="请输入用户名/姓名" >
                      <div class="invalid-feedback">
                        用户名必须在6~12位之间或用户名已经存在
                      </div>
                    </div>
                    <div class="form-group">
                      <input id="register-password" class="input-material" type="password" name="password" placeholder="请输入密码"   >
                      <div class="invalid-feedback">
                        密码必须在6~10位之间
                      </div>
                    </div>
                    <div class="form-group">
                      <input id="register-passwords" class="input-material" type="password"  placeholder="确认密码"   >
                      <div class="invalid-feedback">
                        两次密码必须相同 且在6~10位之间
                      </div>
                    </div>
                    <div class="form-group">
                      <input id="regbtn" type="submit" name="registerSubmit" class="btn btn-primary" value="注册"></input>
                    </div>
                    <small>已有账号?</small><a th:href="@{/user/login}" class="signup">&nbsp;登录</a>
                  </div>
                </form>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- JavaScript files-->
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>
      //注册时验证昵称是否已经存在，若存在，则提示用户更换昵称
      function checkName(adminname) {
        $.ajax({
          url:"[(@{/user/checkname})]",
          data:{"adminname":adminname},
          type:"post",
          success:function (message) {
            console.log("message:"+message);
            if (message==0){
              //用户已经存在，提示用户不能注册
              return "0";
            }else{
              //用户名不存在，可以进行注册
              return "1";
            }
          }
        })
      }
    </script>



    <script>
    	$(function(){
    		/*错误class  form-control is-invalid
    		正确class  form-control is-valid*/
    		var flagName=false;
    		var flagPas=false;
    		var flagPass=false;
    		/*验证用户名*/
    		var name,passWord,passWords;
    		$("#register-username").change(function(){
    			name=$("#register-username").val();
    			if(name.length<6||name.length>12){
    				$("#register-username").removeClass("form-control is-valid")
    				$("#register-username").addClass("form-control is-invalid");
    				flagName=false;
    			}else{
    			  // 判断该用户名是否已经存在
                  //注册时验证昵称是否已经存在，若存在，则提示用户更换昵称
                  $.ajax({
                    url:"[(@{/checkname})]",
                    data:{"adminname":name},
                    type:"post",
                    success:function (message) {
                      // console.log("message:"+message);
                      if (message==0){
                        //用户已经存在，提示用户不能注册
                        $("#register-username").removeClass("form-control is-valid")
                        $("#register-username").addClass("form-control is-invalid");
                        flagName=false;
                      }else{
                        //用户名不存在，可以进行注册
                        $("#register-username").removeClass("form-control is-invalid")
                        $("#register-username").addClass("form-control is-valid");
                        flagName=true;
                      }
                    }
                  })

    			}
    		})
    		/*验证密码*/
    		$("#register-password").change(function(){
    			passWord=$("#register-password").val();
    			if(passWord.length<6||passWord.length>18){
    				$("#register-password").removeClass("form-control is-valid")
    				$("#register-password").addClass("form-control is-invalid");
    				flagPas=false;
    			}else{
    				$("#register-password").removeClass("form-control is-invalid")
    				$("#register-password").addClass("form-control is-valid");
    				flagPas=true;
    			}
    		})
    		/*验证确认密码*/
    		$("#register-passwords").change(function(){
    			passWords=$("#register-passwords").val();
    			if((passWord!=passWords)||(passWords.length<6||passWords.length>18)){
    				$("#register-passwords").removeClass("form-control is-valid")
    				$("#register-passwords").addClass("form-control is-invalid");
    				flagPass=false;
    			}else{
    				$("#register-passwords").removeClass("form-control is-invalid")
    				$("#register-passwords").addClass("form-control is-valid");
    				flagPass=true;
    			}
    		})
    		
    		
    		$("#regbtn").click(function(){
    			if(flagName&&flagPas&&flagPass){
    				localStorage.setItem("name",name);
    				localStorage.setItem("passWord",passWord);
    				location="login.html"
    			}else{
    				if(!flagName){
    					$("#register-username").addClass("form-control is-invalid");
    				}
    				if(!flagPas){
    					$("#register-password").addClass("form-control is-invalid");
    				}
    				if(!flagPass){
    					$("#register-passwords").addClass("form-control is-invalid");
    				}
    			}
    		})
    	})
    </script>
  </body>
</html>